<template>
  <div>
<!-- 搜索框 -->
<Searchcom />
<!-- 轮播图 -->
<Swipte :images='images'/>
<div class="flexbox">
  <a class="box" v-for='(item,index) in list ' :key="index">
    <img src='../../assets/整租.png' alt="">
    <h2>{{item.title}}</h2>
  </a>
</div>

  <div class="groups-box">
    <div class="title"><h3>租房小组</h3><a href=""><span>更多</span></a></div>
  </div>

  </div>
</template>
<script>
import { groupsApi, swiperApi } from '@/api'
import Searchcom from '@/components/Searchcom.vue'
// import List from '../List'
import Swipte from '@/components/Swipte.vue'
export default {
  async created () {
    const res = await groupsApi()
    console.log(res)
    this.groups = res.data.body
    const res2 = await swiperApi()
    console.log(res)
    res2.data.body.map(item => {
      this.images.push('http://liufusong.top:8080' + item.imgSrc)
      // console.log(this.images)
    })
  },
  data () {
    return {
      list: [
        {
          title: '整租',
          url: '/img/整租.png'
        }, {
          title: '合租',
          url: '/img/合租.png'
        }, {
          title: '地图找房',
          url: '/img/地图找房.png'
        }, {
          title: '去出租',
          url: '/img/去出租.png'
        }
      ],
      groups: [],
      images: []
    }
  },
  components: {
    Swipte,
    Searchcom
  }

}
</script>

<style>
.flexbox{
  display: flex;
  justify-content: space-around;
}
.flexbox a h2{
  text-align: center;
  font-size: 14px;
  font-weight: 400;
}
.flexbox img{
  width: 60px;
  height: 60px;
}
.box{
  padding: 15px,0;
}
.groups-box{
  height: 187px;
  background-color: #f6f5f6;
  font-size: 15px;
  justify-content: space-between;
  padding: 0 10px;
}
.title a{
padding-top: 20px;
color:#787d82;
}
.group-box{
  display: flex;
  flex-wrap: wrap;
}
.morebox{
  height: 50px;
  font-size: 14px;
}
.title{
display: flex;
height: 20px;
width: 100%;
justify-content: space-between;
}
</style>
